import React, {useState} from "react";

function App() {
    const [state, setState] = useState({list: ["aa", "bb", "cc"], inputValue: ""});

    function handleInput(value) {
        setState({list: [...state.list], inputValue: value});
    }

    function addData() {
        if (!state.inputValue) {
            return;
        }
        const newData = [...state.list, state.inputValue];
        setState({list: newData, inputValue: ""});
    }

    function delData(index) {
        const newData = [...state.list];
        newData.splice(index, 1);
        setState({list: newData, inputValue: ""});
    }

    return <div>
        <input onChange={e => handleInput(e.target.value)} value={state.inputValue}/>
        <button onClick={addData}>click</button>
        <ul>
            {state.list.map((item, index) => <li key={item}>{item}
                <button onClick={() => delData(index)}>del</button>
            </li>)}
        </ul>
        {state.list.length === 0 && <div>暂无数据</div>}
    </div>
}

export default App;